<template>
<div class="favorite">
   <NavBar showMore showBack/>
    <van-tabs
    v-model="activeName"
    background="#2D3856"
    color="#5F5AF7"
    title-inactive-color="#999"
    title-active-color="#5F5AF7"
    >
        <van-tab title="视频" name="a"></van-tab>
        <van-tab title="商品" name="b"></van-tab>
        <van-tab title="话题" name="c"></van-tab>
    </van-tabs>
    <div class="list">
        <div class="edit">
            <div class="length" @click="setToken">共有{{ dataList.length }}{{ token }}个商品</div>
            <div class="action" @click="isEdit=!isEdit">{{ isEdit ? '取消' : '编辑' }}</div>
        </div>
        <ListItem
        v-model="isLoading"
        :finished="finished"
        :loading="loading"
        @refresh="refresh"
        @load="load"       
        >
            <template #content>
                <van-checkbox-group v-model="checked" ref="checkboxGroup">
                <div class="item" v-for="item in dataList">
                    <van-checkbox :name="item.id" class="checkbox" v-if="isEdit"></van-checkbox>
                    <img src="@/assets/food.png" />
                    <div class="content">
                            <div class="name">【唇顾物语】牛排劲爽版/鲜亨版325g*5</div>
                            <div class="price">价格<span class="text-price">20</span></div>
                            <div class="now_price">佣金<span class="text-price">20</span></div>
                    </div>
                    <div class="star" @click="change(item)">
                        <img :src="item.act ? StarActIcon : StarIcon">
                    </div>
                    </div>
                </van-checkbox-group>            
            </template>      
        </ListItem>
        <transition name="slide">
            <div class="actions" v-if="isEdit">
            <van-checkbox v-model="selectAll" @change="checkAll"><span class="text">全选</span></van-checkbox>
            <div class="btngroup">
                <div class="share">分享</div>
                <div class="del">删除</div>
            </div>
            </div>         
        </transition>
    </div>
</div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
import { useStore } from 'vuex'
import StarIcon from '@/assets/star.png'
import StarActIcon from '@/assets/star_act.png'
import { Checkbox, CheckboxGroup } from 'vant'

export default defineComponent({
    components: {
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup
    },
    setup () {
        const state = reactive({
            activeName: 'a',
            isLoading: false,
            finished: false,
            loading: false,
            selectAll: false,
            isEdit: false,
            checked: [],
            checkboxGroup: null,
            dataList: [
                { value: '222', act: false, id: 1 },
                { value: '222', act: false, id: 2 },
                { value: '222', act: false, id: 3 },
                { value: '222', act: false, id: 4 },
                { value: '222', act: false, id: 5 },
                { value: '222', act: false, id: 6 },
                { value: '222', act: false, id: 7 },
                { value: '222', act: false, id: 8 },
                { value: '222', act: false, id: 9 },
                { value: '222', act: false, id: 10 },
                { value: '222', act: false, id: 11 },
                { value: '222', act: false, id: 12 }
            ]
        })
        const refresh = () => {
            setTimeout(() => {
              state.isLoading = false
            }, 2000)
        }

        const change = (item) => {
            item.act = !item.act
        }
        const load = () => {
            state.loading = false
            setTimeout(() => {
                state.loading = false
                state.finished = true
            }, 3000)
        }

        const checkAll = () => {
          state.checkboxGroup.toggleAll();
        }
        const store = useStore()
        const token = computed(() => store.getters.token)
        const setToken = () => store.commit('SET_TOKEN', 22222)
        return {
            ...toRefs(state),
            StarIcon,
            token,
            setToken,
            StarActIcon,
            change,
            refresh,
            load,
            checkAll
        }
    }
})

</script>

<style lang="scss" scoped>
    .favorite {
        background-color:$baseColor;
        .list {
            flex: 1;
            position: relative;
            background-color: #F9F8F8;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            display: flex;
            margin-top: 10px;
            flex-direction: column;           
            .slide-enter-active, .slide-leave-active {
               transition: transform 0.3s ease-out;
            }
            .slide-enter-from, .slide-leave-to {
               transform: translateY(100%);
            } 
            .edit {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                padding: 8px 20px;
            }
            .actions {
                font-size: 12px;
                background: #8973ea;
                padding: 20px 15px;
                color: white;
                border-radius: 10px 10px 0 0;
                display: flex;
                justify-content: space-between;
                .text {
                    color: white;
                }                
                .btngroup {
                    display: flex;
                    & > div {
                        padding: 3px 10px;
                        border-radius: 10px;
                        border: 1px solid white;
                        &.share {
                            margin-right: 20px;
                        }
                        &.del {
                            color: #ea7272;
                            border-color: #ea7272
                        }
                    }
                }              
            }
            .item {
                background-color: white;
                margin-bottom: 5px;
                display: flex;
                padding: 12px 20px;
                .checkbox { margin-right: 10px; }
                img {
                    width: 68px;
                    height: 68px;
                    margin-right: 5px;
                }
                .star {
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    border-left: 1px solid #e1e1e1;
                    padding-left: 20px;
                    margin-left: 8px;
                    img {
                        width: 26px;
                        height: 26px;
                    }
                }
                .content {
                    flex: 1;
                    font-size: 12px;
                    overflow: hidden;
                     & > div {
                         &:not(:last-of-type) {
                             margin-bottom: 8px;
                         }
                         & > span {
                             padding-left: 5px;
                         }
                        &.name {
                            overflow: hidden;    
                            text-overflow:ellipsis;    
                            white-space: nowrap; 
                        }
                        &.price {
                           color: #F95858
                        }
                        &.now_price {
                            color: #666
                        }
                     }

                }
            }
       }
    }     
</style>